<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                <title>JavaScript Surface Plot</title>
                
                <link rel="stylesheet" href="http://magic-table.googlecode.com/svn/trunk/magic-table/google_visualisation/example.css" type="text/css">
                <!--[if IE]><script type="text/javascript" src="http://surface-plot.googlecode.com/svn/trunk/javascript/excanvas.js"></script><![endif]-->
                <script type="text/javascript" src='http://javascript-surface-plot.googlecode.com/svn/trunk/javascript/SurfacePlot.js'></script>
                <script type="text/javascript" src='http://javascript-surface-plot.googlecode.com/svn/trunk/javascript/ColourGradient.js'></script>
                <script type="text/javascript" src="http://www.google.com/jsapi"></script>
            
                <script type="text/javascript">
                        
                    google.load("visualization", "1");
                    google.setOnLoadCallback(setUp);
                    
                    function setUp()
                    {
                        var numRows = 45.0;
                        var numCols = 45;
                        
                        var tooltipStrings = new Array();
                        var data = new google.visualization.DataTable();
                        
                        for (var i = 0; i < numCols; i++)
                        {
                            data.addColumn('number', 'col'+i);
                        }
                        
                        data.addRows(numRows);
                        var d = 360 / numRows;
                        var idx = 0;
                        
                        for (var i = 0; i < numRows; i++) 
                        {
                            for (var j = 0; j < numCols; j++)
                            {
//								var x = i - numRows/2;
//                                var y = j - numCols/2;
//                                var value = (Math.cos(i * d * Math.PI / 180.0) * Math.cos(j * d * Math.PI / 180.0));
//                                value = (Math.sqrt(x*x+y*y)+5*Math.cos(Math.sqrt((x*x+y*y) * d * Math.PI / 180.0)))/15.0
								
                                var value = (Math.cos(i * d * Math.PI / 180.0) * Math.cos(j * d * Math.PI / 180.0));
                                
                                data.setValue(i, j, value / 4.0);
                                
                                tooltipStrings[idx] = "x:" + i + ", y:" + j + " = " + value;
                                idx++;
                            }
                        }
        
                        surfacePlot = new greg.ross.visualisation.SurfacePlot(document.getElementById("surfacePlotDiv"));
                        
                        // Don't fill polygons in IE. It's too slow.
                        var fillPly = true;
                        
                        // Define a colour gradient.
                        var colour1 = {red:0, green:0, blue:255};
                        var colour2 = {red:0, green:255, blue:255};
                        var colour3 = {red:0, green:255, blue:0};
                        var colour4 = {red:255, green:255, blue:0};
                        var colour5 = {red:255, green:0, blue:0};
                        var colours = [colour1, colour2, colour3, colour4, colour5];
                        
                        // Axis labels.
                        var xAxisHeader = "X";
                        var yAxisHeader = "Y";
                        var zAxisHeader = "Z";
                        
                        var options = {xPos: 50, yPos: 0, width: 500, height: 500, colourGradient: colours, fillPolygons: fillPly,
                            tooltips: tooltipStrings, xTitle: xAxisHeader, yTitle: yAxisHeader, zTitle: zAxisHeader, restrictXRotation: false};
                        
                        surfacePlot.draw(data, options);
                    }
                        
                </script>
                
        </head>
        <body>
        <div class="g-unit" id="gc-pagecontent">
        <h1 class="page_title">Visualization: JavaScript Surface Plot</h1>

        <div class="toc">
            <ol>
                <li><a href="#Overview">Overview</a>
                <li><a href="#Example">Example</a>
                <li><a href="#Loading">Loading</a>
                <li><a href="#Data_Format">Data Format</a>
                <li><a href="#Configuration_Options">Configuration Options</a>
                <li><a href="#Methods">Methods</a>

                <li><a href="#Events">Events</a>
                <li><a href="#Data_Policy">Data Policy</a>
            </ol>
        </div>

        <h1><a name="Overview" id="Overview"></a>Overview</h1>
        <p>
        This JavaScript code allows one to plot 3D surfaces.
        <br><br>
        Tested in Chrome, Firefox, Opera, Safari and Internet Explorer 6. <span style="font-weight:bold;">Works in IE via use of excanvas.</span> (See test.html in the download.)
        <br><br>
        Performs best in Safari and Chrome. 

        <h2>Features</h2>
        <p>
            <ol>
              <li>
                <span style="font-weight:bold;">pure JavaScript</span> implementation. <span style="font-weight:bold;">No need for Flash.</span>
              </li>
              <li>
                <span style="font-weight:bold;">rotation</span> - left-click and drag the mouse to rotate the surface  
              </li>
              <li>
                <span style="font-weight:bold;">scaling</span> - hold down the shift key and drag the mouse to scale 
              </li>
              <li>
                hover the mouse over the surface to see values 
              </li>
              <li>
                custom axis titles (not availabe in IE)
              </li>
              <li>
                customisable <span style="font-weight:bold;">colour gradients</span>
              </li>
              <li>
                works in all popular browsers 
              </li>
            </ol>
        </p>
        
        <h2>Applications</h2>
        <p>
            <ol>
              <li>
                visualise correlation surfaces 
              </li>
              <li>
                plot trigonometric functions 
              </li>
              <li>
                chart financial volatilities in 3D 
              </li>
            </ol>
        </p>
        </p>
        <br><br>
        <p>
            This project is hosted by Google-code. Click <a href="http://code.google.com/p/javascript-surface-plot/">here</a> to go to the homepage and see
            additional examples and documentation.
        </p>
        <p>
        
        <span style="color:#4466aa">By: Greg Ross</span>

        </p>
        <h1><a name="Overview" id="Overview"></a>Download</h1>
        <p>
            Download the library from the project <a href="http://code.google.com/p/javascript-surface-plot/">home page</a>.
        </p>    

        <h1><a name="Example" id="Example"></a>Example</h1>

        <br>
        <div id="surfacePlotDiv"><!-- surface plot goes here... --></div>
        <br>
        <br>
        <span class='bodyText'>The above example demonstrates the JavaScript 3D surface plot. 
        This is generated by the code shown below. The code creates a plot representing the trigonometric function</span> <span style="font-weight:bold;">z = cos(x) * cos(y)</span>
        <br>
        <br>
        <span class='bodyText'>The following code demonstrates basic usage of the API. To see more possibilities, click
        <a href="http://code.google.com/p/javascript-surface-plot/">here</a>.</span>
        <br>
        <br>

        <pre class="prettyprint">
&lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
    &lt;!--[if IE]&gt;&lt;script type="text/javascript" src="javascript/excanvas.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
    &lt;script type="text/javascript" src='javascript/SurfacePlot.js'&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src='javascript/ColourGradient.js'&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;

    &lt;title&gt;SurfacePlot test stub&lt;/title&gt;
        
  &lt;/head&gt;
  &lt;body&gt;
        
    &lt;script type='text/javascript'&gt;
            
      google.load("visualization", "1");
      google.setOnLoadCallback(setUp);
            
        function setUp()
        {
          var numRows = 45.0;
          var numCols = 45;
                
          var tooltipStrings = new Array();
          var data = new google.visualization.DataTable();
                
          for (var i = 0; i &lt; numCols; i++)
          {
            data.addColumn('number', 'col'+i);
          }
                
          data.addRows(numRows);
          var d = 360 / numRows;
          var idx = 0;
                
          for (var i = 0; i &lt; numRows; i++) 
          {
            for (var j = 0; j &lt; numCols; j++)
            {
              var value = (Math.cos(i * d * Math.PI / 180.0) * Math.cos(j * d * Math.PI / 180.0));
              data.setValue(i, j, value / 4.0);
        
              tooltipStrings[idx] = "x:" + i + ", y:" + j + " = " + value;
              idx++;
            }
          }

         var surfacePlot = new greg.ross.visualisation.SurfacePlot(document.getElementById("surfacePlotDiv"));

         // Don't fill polygons in IE. It's too slow.
         var fillPly = true;

         // Define a colour gradient.
         var colour1 = {red:0, green:0, blue:255};
         var colour2 = {red:0, green:255, blue:255};
         var colour3 = {red:0, green:255, blue:0};
         var colour4 = {red:255, green:255, blue:0};
         var colour5 = {red:255, green:0, blue:0};
         var colours = [colour1, colour2, colour3, colour4, colour5];

         // Axis labels.
         var xAxisHeader = "X";
         var yAxisHeader = "Y";
         var zAxisHeader = "Z";

         var options = {xPos: 300, yPos: 50, width: 500, height: 500, colourGradient: colours,
           fillPolygons: fillPly, tooltips: tooltipStrings, xTitle: xAxisHeader,
           yTitle: yAxisHeader, zTitle: zAxisHeader, restrictXRotation: false};
                
        surfacePlot.draw(data, options);
      }
            
      &lt;/script&gt;
        
      &lt;div id='surfacePlotDiv'&gt;
        &lt;!-- SurfacePlot goes here... --&gt;
            
      &lt;/div&gt;
        
    &lt;/body&gt;
&lt;/html&gt;
        </pre>

        <h1><a name="Loading" id="Loading"></a>Loading</h1>

        <p>
        A <code>google.load</code> package name is not required.
        </p>

        <pre class="prettyprint">
google.load("visualization", "1");
        </pre>
        
        <p>
            The visualization's class name is <code>greg.ross.visualisation.SurfacePlot</code>
        </p>
        
        <pre class="prettyprint">
var surfacePlot = new greg.ross.visualisation.SurfacePlot(document.getElementById("surfacePlotDiv"));
        </pre>
        
        <h1><a name="Data_Format" id="Data_Format"></a>Data Format</h1>
        
        <br>
        At least two rows and two columns must be created. All row and column values must be numeric. 
        
        A tooltip for each point must be specified in a separate array. See the section on options, below, for details.
        
        <h1><a name="Configuration_Options" id="Configuration_Options"></a>Configuration Options</h1>
        
        <br>
        <table>
          <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Default</th>
            <th>Description</th>
          </tr>
          <tr>
            <td>xPos</td>
            <td>number</td>
            <td>0</td>
            <td>The x-position of the view, relative to the containing element.
            </td>
          </tr>
          <tr>
            <td>yPos</td>
            <td>number</td>
            <td>0</td>
            <td>The y-position of the view, relative to the containing element.
            </td>
          </tr>
          <tr>
            <td>width</td>
            <td>number</td>
            <td>none</td>
            <td>The width of the view.
            </td>
          </tr>
          <tr>
            <td>height</td>
            <td>number</td>
            <td>none</td>
            <td>The height of the view.
            </td>
          </tr>
          <tr>
            <td>colourGradient</td>
            <td>Colour array</td>
            <td>none</td>
            <td>Can contain any number of colours. These determine the colours applied from the max to min values on the surface plot.
            </td>
          </tr>
          <tr>
            <td>fillPolygons</td>
            <td>boolean</td>
            <td>true</td>
            <td>Determines whether the surface is rendered with the colours specified above.
            <span style="font-weight:bold;">Setting this option to false produces a wire frame effect.</span>
            </td>
          </tr>
          <tr>
            <td>tooltips</td>
            <td>String array</td>
            <td>none</td>
            <td>This is an array of strings corresponding to the points in the view.
            The tooltip for a particular point is displayed when the mouse is moved closest to that point.</td>
          </tr>
          <tr>
            <td>xTitle</td>
            <td>String</td>
            <td>none</td>
            <td>This is the x-axis title text.</td>
          </tr>
          <tr>
            <td>yTitle</td>
            <td>String</td>
            <td>none</td>
            <td>This is the y-axis title text.</td>
          </tr>
          <tr>
            <td>zTitle</td>
            <td>String</td>
            <td>none</td>
            <td>This is the z-axis title text.</td>
          </tr>
          <tr>
            <td>restrictXRotation</td>
            <td>Boolean</td>
            <td>False</td>
            <td>When set to true, this option prevents the plot from being rotated around the x-axis
			 to the extent of revealing the underside of the surface.</td>
          </tr>
        </table>
        
        <h1><a name="Methods" id="Methods"></a>Methods</h1>
        
        <br>
        <table>
          <tr>
            <th>Method</th>
            <th>Return Type</th>
            <th>Description</th>
          </tr>
        
          <tr>
            <td><code>draw(data, options)</code></td>
            <td>none</td>
            <td>Draws the view.</td>
          </tr>
        </table>  
        
        <h1><a name="Events" id="Events"></a>Events</h1>
        
        <p>No triggered events. 
        </p>
        
        <h1><a name="Data_Policy" id="Data_Policy"></a>Data Policy</h1>
        
        <p>
        All code and data are processed and rendered in the browser. No data is sent to any server.
                <br>
                <br>
                <br>
        </p>

      </div>
          
        </body>
</html>
